<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employee Info</title>
</head>
<body>
    <table id="dataTable" border="1" cellspacing="0" cellpadding="0" style="text-align: center">
        <caption>Employee Info</caption>
        <thead>
            <tr>
                <th>id</th>
                <th>lastName</th>
                <th>email</th>
                <th>gender</th>
                <th>options <a th:href="@{/toAdd}">add</a></th>
            </tr>
        </thead>
        
        <tbody>
            <tr th:each="employee : ${employeeList}">
                <td th:text="${employee.id}"></td>
                <td th:text="${employee.lastName}"></td>
                <td th:text="${employee.email}"></td>
                <td th:text="${employee.gender}"></td>
                <td>
                    <a @click.prevent="deleteEmployee" th:href="@{/employee/} + ${employee.id}">delete</a>
                    <a th:href="@{'/employee/' + ${employee.id}}">update</a>
                </td>
            </tr>
        </tbody>
        
    </table>
    
    <form id="deleteForm" method="post">
        <input type="hidden" name="_method" value="delete">
    </form>

    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script type="text/javascript">
        var vue = new Vue({
           el:"#dataTable",
           data:{
               
           },
           methods:{
               deleteEmployee:function (event){
                   //根据id获取表单元素
                    var deleteForm = document.getElementById("deleteForm");
                    //将触发点击事件的超链接的href属性赋值给表单的action属性
                    deleteForm.action = event.target.href;
                    //提交表单
                    deleteForm.submit();
                    //阻止a标签的默认行为（可以通过Vue阻止默认事件）
                   // event.preventDefault();
               } 
           } 
        });
    </script>
</body>
</html>